<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
		<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
		<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
		<meta name="author" content="yinq">
		<title>首页 - 光年(Light Year Admin V5)后台管理系统模板</title>
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="default">
		<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="css/style.min.css">
	</head>

	<body>
		<!--页面loading-->
		<div id="lyear-preloader" class="loading">
			<div class="ctn-preloader">
				<div class="round_spinner">
					<div class="spinner"></div>
					<img src="images/loading-logo.png" alt="">
				</div>
			</div>
		</div>
		<!--页面loading end-->
		<div class="lyear-layout-web">
			<div class="lyear-layout-container">
				<!--左侧导航-->
				<aside class="lyear-layout-sidebar">

					<!-- logo -->
					<div id="logo" class="sidebar-header">
						<a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
					</div>
					<div class="lyear-layout-sidebar-info lyear-scroll">

						<nav class="sidebar-main">

							<ul class="nav-drawer">
								<li class="nav-item active">
									<a href="index.html">
										<i class="mdi mdi-home-city-outline"></i>
										<span>个人中心</span>
									</a>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-television-guide"></i>
										<span>布局</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_layout_break_point.html">拐点</a> </li>
										<li> <a href="lyear_layout_containers.html">容器</a> </li>
										<li> <a href="lyear_layout_grid.html">栅格</a> </li>
										<li> <a href="lyear_layout_columns.html">列</a> </li>
										<li> <a href="lyear_layout_gutters.html">沟槽</a> </li>
										<li> <a href="lyear_layout_utilities.html">实用程序</a> </li>
										<li> <a href="lyear_layout_zindex.html">Z-index</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-silo"></i>
										<span>页面内容</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_content_typography.html">排版</a> </li>
										<li> <a href="lyear_content_images.html">图片</a> </li>
										<li> <a href="lyear_content_tables.html">表格</a> </li>
										<li> <a href="lyear_content_figures.html">画像</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-map-outline"></i>
										<span>表单</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_forms_overview.html">概述</a> </li>
										<li> <a href="lyear_forms_control.html">表单控件</a> </li>
										<li> <a href="lyear_forms_select.html">下拉选择</a> </li>
										<li> <a href="lyear_forms_radio.html">单选框</a> </li>
										<li> <a href="lyear_forms_checkbox.html">复选框</a> </li>
										<li> <a href="lyear_forms_switch.html">开关</a> </li>
										<li> <a href="lyear_forms_range.html">范围</a> </li>
										<li> <a href="lyear_forms_input_group.html">输入组</a> </li>
										<li> <a href="lyear_forms_floating_labels.html">浮动标签</a> </li>
										<li> <a href="lyear_forms_layout.html">布局</a> </li>
										<li> <a href="lyear_forms_validation.html">验证</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-tune"></i>
										<span>组件</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_components_accordion.html">手风琴菜单</a> </li>
										<li> <a href="lyear_components_alerts.html">警告框</a> </li>
										<li> <a href="lyear_components_badge.html">徽章</a> </li>
										<li> <a href="lyear_components_breadcrumb.html">面包屑导航</a> </li>
										<li> <a href="lyear_components_buttons.html">按钮</a> </li>
										<li> <a href="lyear_components_button_group.html">按钮组</a> </li>
										<li> <a href="lyear_components_card.html">卡片</a> </li>
										<li> <a href="lyear_components_carousel.html">轮播</a> </li>
										<li> <a href="lyear_components_close_button.html">关闭按钮</a> </li>
										<li> <a href="lyear_components_collapse.html">折叠</a> </li>
										<li> <a href="lyear_components_dropdowns.html">下拉菜单</a> </li>
										<li> <a href="lyear_components_list_group.html">列表组</a> </li>
										<li> <a href="lyear_components_modal.html">模态框</a> </li>
										<li> <a href="lyear_components_navs_tabs.html">导航 &amp; 标签页</a> </li>
										<li> <a href="lyear_components_navbar.html">导航栏</a> </li>
										<li> <a href="lyear_components_offcanvas.html">滑动容器</a> </li>
										<li> <a href="lyear_components_pagination.html">分页</a> </li>
										<li> <a href="lyear_components_placeholders.html">占位符</a> </li>
										<li> <a href="lyear_components_popovers.html">POP提示</a> </li>
										<li> <a href="lyear_components_progress.html">进度条</a> </li>
										<li> <a href="lyear_components_scrollspy.html">滚动监听</a> </li>
										<li> <a href="lyear_components_spinners.html">加载状态</a> </li>
										<li> <a href="lyear_components_toasts.html">通知消息</a> </li>
										<li> <a href="lyear_components_tooltips.html">工具提示</a> </li>
										<li> <a href="lyear_components_other.html">其他</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-card-bulleted-outline"></i>
										<span>助手</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_helpers_clearfix.html">清除浮动</a> </li>
										<li> <a href="lyear_helpers_colored_links.html">彩色链接</a> </li>
										<li> <a href="lyear_helpers_ratio.html">比例</a> </li>
										<li> <a href="lyear_helpers_position.html">定位</a> </li>
										<li> <a href="lyear_helpers_stacks.html">堆叠</a> </li>
										<li> <a href="lyear_helpers_visually_hidden.html">视觉隐藏</a> </li>
										<li> <a href="lyear_helpers_stretched_link.html">延伸链接</a> </li>
										<li> <a href="lyear_helpers_text_truncation.html">文本截断</a> </li>
										<li> <a href="lyear_helpers_vertical_rule.html">垂直法则</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-map-search-outline"></i>
										<span>工具类</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_utilities_background.html">背景</a> </li>
										<li> <a href="lyear_utilities_borders.html">边框</a> </li>
										<li> <a href="lyear_utilities_colors.html">颜色</a> </li>
										<li> <a href="lyear_utilities_display.html">显示属性</a> </li>
										<li> <a href="lyear_utilities_flex.html">弹性布局</a> </li>
										<li> <a href="lyear_utilities_float.html">浮动</a> </li>
										<li> <a href="lyear_utilities_interactions.html">交互</a> </li>
										<li> <a href="lyear_utilities_opacity.html">透明度</a> </li>
										<li> <a href="lyear_utilities_overflow.html">溢出处理</a> </li>
										<li> <a href="lyear_utilities_position.html">定位</a> </li>
										<li> <a href="lyear_utilities_shadows.html">阴影</a> </li>
										<li> <a href="lyear_utilities_sizing.html">尺寸</a> </li>
										<li> <a href="lyear_utilities_spacing.html">间距</a> </li>
										<li> <a href="lyear_utilities_text.html">文本</a> </li>
										<li> <a href="lyear_utilities_vertical_align.html">垂直对齐</a> </li>
										<li> <a href="lyear_utilities_visibility.html">可见性</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-stove"></i>
										<span>示例页面</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_pages_doc.html">文档列表</a> </li>
										<li> <a href="lyear_pages_table.html">表格插件</a> </li>
										<li> <a href="lyear_pages_gallery.html">图库列表</a> </li>
										<li> <a href="lyear_pages_config.html">网站配置</a> </li>
										<li> <a href="lyear_pages_rabc.html">设置权限</a> </li>
										<li> <a href="lyear_pages_add_doc.html">新增文档</a> </li>
										<li> <a href="lyear_pages_login_1.html" target="_blank">登录页面1</a> </li>
										<li> <a href="lyear_pages_login_2.html" target="_blank">登录页面2</a> </li>
										<li> <a href="lyear_pages_login_3.html" target="_blank">登录页面3</a> </li>
										<li> <a href="lyear_pages_login_4.html" target="_blank">登录页面4</a> </li>
										<li> <a href="lyear_pages_error.html">错误页面</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-card-text-outline"></i>
										<span>其他内容</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_other_icons.html">图标</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-file-code-outline"></i>
										<span>JS 插件</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="lyear_pages_guide.html">表单向导</a> </li>
										<li> <a href="lyear_js_datepicker.html">日期选取器</a> </li>
										<li> <a href="lyear_js_colorpicker.html">选色器</a> </li>
										<li> <a href="lyear_js_chartjs.html">Chart.js</a> </li>
										<li> <a href="lyear_js_jconfirm.html">对话框</a> </li>
										<li> <a href="lyear_js_tags_input.html">标签插件</a> </li>
										<li> <a href="lyear_js_notify.html">通知消息</a> </li>
										<li> <a href="lyear_js_maxlength.html">长度判断</a> </li>
										<li> <a href="lyear_js_select.html">下拉选择</a> </li>
										<li> <a href="lyear_js_fullcalendar.html">日程插件</a> </li>
										<li> <a href="lyear_js_loading.html">loading插件</a> </li>
									</ul>
								</li>
								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)">
										<i class="mdi mdi-folder-text-outline"></i>
										<span>多级菜单</span>
									</a>
									<ul class="nav nav-subnav">
										<li> <a href="#!">一级菜单</a> </li>
										<li class="nav-item nav-item-has-subnav">
											<a href="#!">一级菜单</a>
											<ul class="nav nav-subnav">
												<li> <a href="#!">二级菜单</a> </li>
												<li class="nav-item nav-item-has-subnav">
													<a href="#!">二级菜单</a>
													<ul class="nav nav-subnav">
														<li> <a href="#!">三级菜单</a> </li>
														<li> <a href="#!">三级菜单</a> </li>
													</ul>
												</li>
											</ul>
										</li>
										<li> <a href="#!">一级菜单</a> </li>
									</ul>
								</li>
							</ul>
						</nav>

						<div class="sidebar-footer">
							<p class="copyright">
								<span>Copyright &copy; 2022. </span>
								<a target="_blank" href="http://www.bixiaguangnian.com">笔下光年</a>
								<span> All rights reserved.</span>
							</p>
						</div>
					</div>

				</aside>
				<!--End 左侧导航-->

				<!--头部信息-->
				<header class="lyear-layout-header">

					<nav class="navbar">

						<div class="navbar-left">
							<div class="lyear-aside-toggler">
								<span class="lyear-toggler-bar"></span>
								<span class="lyear-toggler-bar"></span>
								<span class="lyear-toggler-bar"></span>
							</div>
						</div>

						<ul class="navbar-right d-flex align-items-center">
							<!--顶部消息部分-->
							<li class="dropdown dropdown-notice">
								<span data-bs-toggle="dropdown" class="position-relative icon-item">
									<i class="mdi mdi-bell-outline fs-5"></i>
									<span class="position-absolute translate-middle badge bg-danger">7</span>
								</span>
								<div class="dropdown-menu dropdown-menu-end">
									<div class="lyear-notifications">

										<div class="lyear-notifications-title d-flex justify-content-between"
											data-stopPropagation="true">
											<span>你有 10 条未读消息</span>
											<a href="#!">查看全部</a>
										</div>
										<div class="lyear-notifications-info lyear-scroll">
											<a href="#!" class="dropdown-item"
												title="树莓派销量猛增，疫情期间居家工作学习、医疗领域都需要它">树莓派销量猛增，疫情期间居家工作学习、医疗领域都需要它</a>
											<a href="#!" class="dropdown-item"
												title="GNOME 用户体验团队将为 GNOME Shell 提供更多改进">GNOME 用户体验团队将为 GNOME Shell
												提供更多改进</a>
											<a href="#!" class="dropdown-item"
												title="Linux On iPhone 即将面世，支持 iOS 的双启动">Linux On iPhone 即将面世，支持 iOS
												的双启动</a>
											<a href="#!" class="dropdown-item" title="GitHub 私有仓库完全免费面向团队提供">GitHub
												私有仓库完全免费面向团队提供</a>
											<a href="#!" class="dropdown-item"
												title="Wasmtime 为 WebAssembly 增加 Go 语言绑定">Wasmtime 为 WebAssembly 增加 Go
												语言绑定</a>
											<a href="#!" class="dropdown-item"
												title="红帽借“订阅”成开源一哥，首创者 Cormier 升任总裁">红帽借“订阅”成开源一哥，首创者 Cormier 升任总裁</a>
											<a href="#!" class="dropdown-item" title="Zend 宣布推出两项 PHP 新产品">Zend 宣布推出两项
												PHP 新产品</a>
										</div>

									</div>
								</div>
							</li>
							<!--End 顶部消息部分-->
							<!--切换主题配色-->
							<li class="dropdown dropdown-skin">
								<span data-bs-toggle="dropdown" class="icon-item">
									<i class="mdi mdi-palette fs-5"></i>
								</span>
								<ul class="dropdown-menu dropdown-menu-end" data-stopPropagation="true">
									<li class="lyear-skin-title">
										<p>主题</p>
									</li>
									<li class="lyear-skin-li clearfix">
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="site_theme"
												id="site_theme_1" value="default" checked="checked">
											<label class="form-check-label" for="site_theme_1"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="site_theme"
												id="site_theme_2" value="translucent-green">
											<label class="form-check-label" for="site_theme_2"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="site_theme"
												id="site_theme_3" value="translucent-blue">
											<label class="form-check-label" for="site_theme_3"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="site_theme"
												id="site_theme_4" value="translucent-yellow">
											<label class="form-check-label" for="site_theme_4"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="site_theme"
												id="site_theme_5" value="translucent-red">
											<label class="form-check-label" for="site_theme_5"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="site_theme"
												id="site_theme_6" value="translucent-pink">
											<label class="form-check-label" for="site_theme_6"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="site_theme"
												id="site_theme_7" value="translucent-cyan">
											<label class="form-check-label" for="site_theme_7"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="site_theme"
												id="site_theme_8" value="dark">
											<label class="form-check-label" for="site_theme_8"></label>
										</div>
									</li>
									<li class="lyear-skin-title">
										<p>LOGO</p>
									</li>
									<li class="lyear-skin-li clearfix">
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="logo_bg" id="logo_bg_1"
												value="default" checked="checked">
											<label class="form-check-label" for="logo_bg_1"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="logo_bg" id="logo_bg_2"
												value="color_2">
											<label class="form-check-label" for="logo_bg_2"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="logo_bg" id="logo_bg_3"
												value="color_3">
											<label class="form-check-label" for="logo_bg_3"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="logo_bg" id="logo_bg_4"
												value="color_4">
											<label class="form-check-label" for="logo_bg_4"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="logo_bg" id="logo_bg_5"
												value="color_5">
											<label class="form-check-label" for="logo_bg_5"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="logo_bg" id="logo_bg_6"
												value="color_6">
											<label class="form-check-label" for="logo_bg_6"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="logo_bg" id="logo_bg_7"
												value="color_7">
											<label class="form-check-label" for="logo_bg_7"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="logo_bg" id="logo_bg_8"
												value="color_8">
											<label class="form-check-label" for="logo_bg_8"></label>
										</div>
									</li>
									<li class="lyear-skin-title">
										<p>头部</p>
									</li>
									<li class="lyear-skin-li clearfix">
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="header_bg"
												id="header_bg_1" value="default" checked="checked">
											<label class="form-check-label" for="header_bg_1"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="header_bg"
												id="header_bg_2" value="color_2">
											<label class="form-check-label" for="header_bg_2"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="header_bg"
												id="header_bg_3" value="color_3">
											<label class="form-check-label" for="header_bg_3"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="header_bg"
												id="header_bg_4" value="color_4">
											<label class="form-check-label" for="header_bg_4"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="header_bg"
												id="header_bg_5" value="color_5">
											<label class="form-check-label" for="header_bg_5"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="header_bg"
												id="header_bg_6" value="color_6">
											<label class="form-check-label" for="header_bg_6"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="header_bg"
												id="header_bg_7" value="color_7">
											<label class="form-check-label" for="header_bg_7"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="header_bg"
												id="header_bg_8" value="color_8">
											<label class="form-check-label" for="header_bg_8"></label>
										</div>
									</li>
									<li class="lyear-skin-title">
										<p>侧边栏</p>
									</li>
									<li class="lyear-skin-li clearfix">
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="sidebar_bg"
												id="sidebar_bg_1" value="default" checked="checked">
											<label class="form-check-label" for="sidebar_bg_1"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="sidebar_bg"
												id="sidebar_bg_2" value="color_2">
											<label class="form-check-label" for="sidebar_bg_2"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="sidebar_bg"
												id="sidebar_bg_3" value="color_3">
											<label class="form-check-label" for="sidebar_bg_3"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="sidebar_bg"
												id="sidebar_bg_4" value="color_4">
											<label class="form-check-label" for="sidebar_bg_4"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="sidebar_bg"
												id="sidebar_bg_5" value="color_5">
											<label class="form-check-label" for="sidebar_bg_5"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="sidebar_bg"
												id="sidebar_bg_6" value="color_6">
											<label class="form-check-label" for="sidebar_bg_6"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="sidebar_bg"
												id="sidebar_bg_7" value="color_7">
											<label class="form-check-label" for="sidebar_bg_7"></label>
										</div>
										<div class="form-check form-check-inline">
											<input class="form-check-input" type="radio" name="sidebar_bg"
												id="sidebar_bg_8" value="color_8">
											<label class="form-check-label" for="sidebar_bg_8"></label>
										</div>
									</li>
								</ul>
							</li>
							<!--End 切换主题配色-->
							<!--个人头像内容-->
							<li class="dropdown">
								<a href="javascript:void(0)" data-bs-toggle="dropdown" class="dropdown-toggle">
									<img class="avatar-md rounded-circle" src="images/users/avatar.jpg" alt="笔下光年" />
									<span style="margin-left: 10px;">笔下光年</span>
								</a>
								<ul class="dropdown-menu dropdown-menu-end">
									<li>
										<a class="dropdown-item" href="lyear_pages_profile.html"
											href="javascript:void(0)">
											<i class="mdi mdi-account"></i>
											<span>个人信息</span>
										</a>
									</li>
									<li>
										<a class="dropdown-item" href="lyear_pages_edit_pwd.html"
											href="javascript:void(0)">
											<i class="mdi mdi-lock-outline"></i>
											<span>修改密码</span>
										</a>
									</li>
									<li>
										<a class="dropdown-item" href="javascript:void(0)">
											<i class="mdi mdi-delete"></i>
											<span>清空缓存</span>
										</a>
									</li>
									<li class="dropdown-divider"></li>
									<li>
										<a class="dropdown-item" href="lyear_pages_login_1.html">
											<i class="mdi mdi-logout-variant"></i>
											<span>退出登录</span>
										</a>
									</li>
								</ul>
							</li>
							<!--End 个人头像内容-->
						</ul>

					</nav>

				</header>
				<!--End 头部信息-->

				<!--页面主要内容-->
				<main class="lyear-layout-content">

					<div class="container-fluid">
						<div class="user-profile">
							<div class="row">
								<!-- 用户基本信息开始 -->
								<div class="col-sm-12">
									<div class="card profile-header bg-size"
										style="background-image: url(./images/1663724541608.jpg); background-size: cover; background-position: center center; display: block;">
										<img class="img-fluid bg-img-cover" src="images/1663724541608.jpg" alt=""
											style="display: none;">
										<div class="profile-img-wrrap bg-size"
											style="background-image: url(images/1663724541608.jpg); background-size: cover; background-position: center center; display: block;">
											<img class="img-fluid bg-img-cover"
												src="../assets/images/user-profile/bg-profile.jpg" alt=""
												style="display: none;">
										</div>
										<div class="userpro-box">
											<div class="img-wrraper">
												<div class="avatar"><img class="img-fluid" alt=""
														src="images/users/avatar.jpg"></div><a class="icon-wrapper"
													href="edit-profile.html" data-bs-original-title="" title=""><i
														class="mdi mdi-lead-pencil mdi-24px"></i></a>
											</div>
											<div class="user-designation">
												<div class="title"><a target="_blank" href="" data-bs-original-title=""
														title="">
														<h4>Emay Walter</h4>
													</a>
													<h6>designer</h6>
												</div>
												<div class="social-media">
													<ul class="user-list-social">
														<li><a href="https://www.facebook.com" target="_blank"
																data-bs-original-title="" title=""><i
																	class="fa fa-facebook"></i></a></li>
														<li><a href="https://www.google.com" target="_blank"
																data-bs-original-title="" title=""><i
																	class="fa fa-google-plus"></i></a></li>
														<li><a href="https://www.twitter.com" target="_blank"
																data-bs-original-title="" title=""><i
																	class="fa fa-twitter"></i></a></li>
														<li><a href="https://www.instagram.com" target="_blank"
																data-bs-original-title="" title=""><i
																	class="fa fa-instagram"></i></a></li>
														<li><a href="https://www.rss.com" target="_blank"
																data-bs-original-title="" title=""><i
																	class="fa fa-rss"></i></a></li>
													</ul>
												</div>
												<div class="follow">
													<ul class="follow-list">
														<li>
															<div class="follow-num counter">325</div>
															<span>Follower</span>
														</li>
														<li>
															<div class="follow-num counter">450</div>
															<span>Following</span>
														</li>
														<li>
															<div class="follow-num counter">500</div><span>Likes</span>
														</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
								<!-- 用户基本信息结束 -->
								<div class="col-xl-3 col-md-5 xl-35 box-col-35">
									<div class="default-according style-1 job-accordion">
										<div class="row">
											<div class="col-xl-12">
												<div class="card">
													<div class="card-header">
														<h3 class="p-0"><button class="btn btn-link ps-0"
																data-bs-toggle="collapse"
																data-bs-target="#collapseicon2" aria-expanded="true"
																aria-controls="collapseicon2" data-bs-original-title=""
																title="">About Me</button></h3>
													</div>
													<div class="collapse show" id="collapseicon2"
														aria-labelledby="collapseicon2" data-parent="#accordion">
														<div class="card-body post-about">
															<ul>
																<li>
																	<div class="icon"><svg
																			xmlns="http://www.w3.org/2000/svg"
																			width="24" height="24" viewBox="0 0 24 24"
																			fill="none" stroke="currentColor"
																			stroke-width="2" stroke-linecap="round"
																			stroke-linejoin="round"
																			class="feather feather-briefcase">
																			<rect x="2" y="7" width="20" height="14"
																				rx="2" ry="2"></rect>
																			<path
																				d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16">
																			</path>
																		</svg></div>
																	<div>
																		<h5>UX desginer at Pixelstrap</h5>
																		<p>banglore - 2022</p>
																	</div>
																</li>
																<li>
																	<div class="icon"><svg
																			xmlns="http://www.w3.org/2000/svg"
																			width="24" height="24" viewBox="0 0 24 24"
																			fill="none" stroke="currentColor"
																			stroke-width="2" stroke-linecap="round"
																			stroke-linejoin="round"
																			class="feather feather-book">
																			<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20">
																			</path>
																			<path
																				d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z">
																			</path>
																		</svg></div>
																	<div>
																		<h5>studied computer science</h5>
																		<p>at london univercity - 2015</p>
																	</div>
																</li>
																<li>
																	<div class="icon"><svg
																			xmlns="http://www.w3.org/2000/svg"
																			width="24" height="24" viewBox="0 0 24 24"
																			fill="none" stroke="currentColor"
																			stroke-width="2" stroke-linecap="round"
																			stroke-linejoin="round"
																			class="feather feather-heart">
																			<path
																				d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
																			</path>
																		</svg></div>
																	<div>
																		<h5>relationship status</h5>
																		<p>single</p>
																	</div>
																</li>
																<li>
																	<div class="icon"><svg
																			xmlns="http://www.w3.org/2000/svg"
																			width="24" height="24" viewBox="0 0 24 24"
																			fill="none" stroke="currentColor"
																			stroke-width="2" stroke-linecap="round"
																			stroke-linejoin="round"
																			class="feather feather-map-pin">
																			<path
																				d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z">
																			</path>
																			<circle cx="12" cy="10" r="3"></circle>
																		</svg></div>
																	<div>
																		<h5>lived in london</h5>
																		<p>last 5 year</p>
																	</div>
																</li>
																<li>
																	<div class="icon"><svg
																			xmlns="http://www.w3.org/2000/svg"
																			width="24" height="24" viewBox="0 0 24 24"
																			fill="none" stroke="currentColor"
																			stroke-width="2" stroke-linecap="round"
																			stroke-linejoin="round"
																			class="feather feather-droplet">
																			<path
																				d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z">
																			</path>
																		</svg></div>
																	<div>
																		<h5>blood group</h5>
																		<p>O+positive</p>
																	</div>
																</li>
															</ul>
															<div class="social-network theme-form"><span
																	class="f-w-600">Social Networks</span><a
																	class="btn social-btn btn-fb mb-2 text-center"
																	href="https://www.facebook.com" target="_blank"
																	data-bs-original-title="" title=""><i
																		class="fa fa-facebook m-r-5"></i>Facebook</a><a
																	class="btn social-btn btn-twitter mb-2 text-center"
																	href="https://www.twitter.com" target="_blank"
																	data-bs-original-title="" title=""><i
																		class="fa fa-twitter m-r-5"></i>Twitter</a><a
																	class="btn social-btn btn-google text-center"
																	href="https://www.dribbble.com" target="_blank"
																	data-bs-original-title="" title=""><i
																		class="fa fa-dribbble m-r-5"></i>Dribbble</a>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="col-xl-12 col-md-12 col-sm-6">
												<div class="card">
													<div class="card-header">
														<h3 class="p-0"><button class="btn btn-link ps-0"
																data-bs-toggle="collapse"
																data-bs-target="#collapseicon8" aria-expanded="true"
																aria-controls="collapseicon8" data-bs-original-title=""
																title="">Followers</button></h3>
													</div>
													<div class="collapse show" id="collapseicon8"
														aria-labelledby="collapseicon8" data-parent="#accordion">
														<div class="card-body social-list filter-cards-view">
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/2.png">
																<div class="flex-grow-1"><span class="d-block">Bucky
																		Barnes</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/3.png">
																<div class="flex-grow-1"><span class="d-block">Sarah
																		Loren</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/3.jpg">
																<div class="flex-grow-1"><span class="d-block">Jason
																		Borne</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/10.jpg">
																<div class="flex-grow-1"><span class="d-block">Comeren
																		Diaz</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/11.png">
																<div class="flex-grow-1"><span class="d-block">Andew
																		Jon</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="col-xl-12 col-md-12 col-sm-6">
												<div class="card">
													<div class="card-header">
														<h3 class="p-0"><button class="btn btn-link ps-0"
																data-bs-toggle="collapse"
																data-bs-target="#collapseicon11" aria-expanded="true"
																aria-controls="collapseicon11" data-bs-original-title=""
																title="">Followings</button></h3>
													</div>
													<div class="collapse show" id="collapseicon11"
														aria-labelledby="collapseicon11" data-parent="#accordion">
														<div class="card-body social-list filter-cards-view">
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/3.png">
																<div class="flex-grow-1"><span class="d-block">Sarah
																		Loren</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/2.png">
																<div class="flex-grow-1"><span class="d-block">Bucky
																		Barnes</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/10.jpg">
																<div class="flex-grow-1"><span class="d-block">Comeren
																		Diaz</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/3.jpg">
																<div class="flex-grow-1"><span class="d-block">Jason
																		Borne</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
															<div class="d-flex"><img
																	class="img-50 img-fluid m-r-20 rounded-circle"
																	alt="" src="../assets/images/user/11.png">
																<div class="flex-grow-1"><span class="d-block">Andew
																		Jon</span><a href="javascript:void(0)"
																		data-bs-original-title="" title="">Add
																		Friend</a></div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="col-xl-12 col-md-12 col-sm-6">
												<div class="card">
													<div class="card-header">
														<h3 class="p-0"><button class="btn btn-link ps-0"
																data-bs-toggle="collapse"
																data-bs-target="#collapseicon4" aria-expanded="true"
																aria-controls="collapseicon4" data-bs-original-title=""
																title="">Latest Photos</button></h3>
													</div>
													<div class="collapse show" id="collapseicon4"
														data-parent="#accordion" aria-labelledby="collapseicon4">
														<div class="card-body photos filter-cards-view">
															<ul>
																<li>
																	<div class="latest-post"><img class="img-fluid"
																			alt=""
																			src="../assets/images/social-app/post-1.png">
																	</div>
																</li>
																<li>
																	<div class="latest-post"><img class="img-fluid"
																			alt=""
																			src="../assets/images/social-app/post-2.png">
																	</div>
																</li>
																<li>
																	<div class="latest-post"><img class="img-fluid"
																			alt=""
																			src="../assets/images/social-app/post-3.png">
																	</div>
																</li>
																<li>
																	<div class="latest-post"><img class="img-fluid"
																			alt=""
																			src="../assets/images/social-app/post-4.png">
																	</div>
																</li>
																<li>
																	<div class="latest-post"><img class="img-fluid"
																			alt=""
																			src="../assets/images/social-app/post-5.png">
																	</div>
																</li>
																<li>
																	<div class="latest-post"><img class="img-fluid"
																			alt=""
																			src="../assets/images/social-app/post-6.png">
																	</div>
																</li>
																<li>
																	<div class="latest-post"><img class="img-fluid"
																			alt=""
																			src="../assets/images/social-app/post-7.png">
																	</div>
																</li>
																<li>
																	<div class="latest-post"><img class="img-fluid"
																			alt=""
																			src="../assets/images/social-app/post-8.png">
																	</div>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
											<div class="col-xl-12 col-md-12 col-sm-6">
												<div class="card">
													<div class="card-header">
														<h3 class="p-0"><button class="btn btn-link ps-0"
																data-bs-toggle="collapse"
																data-bs-target="#collapseicon13" aria-expanded="true"
																aria-controls="collapseicon13" data-bs-original-title=""
																title="">Friends</button></h3>
													</div>
													<div class="collapse show" id="collapseicon13"
														data-parent="#accordion" aria-labelledby="collapseicon13">
														<div class="card-body avatar-showcase filter-cards-view">
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/3.jpg" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/5.jpg" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/1.jpg" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/2.png" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/3.png" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/6.jpg" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/10.jpg" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/14.png" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/1.jpg" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/4.jpg" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/11.png" alt="#"></div>
															<div class="d-inline-block friend-pic"><img
																	class="img-50 rounded-circle"
																	src="../assets/images/user/8.jpg" alt="#"></div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-xl-9 col-md-7 xl-65 box-col-65">
								<div class="card">
										<div class="card-header pb-0">
											<h3>Success Color</h3><span>Add <code>.nav-success</code>class with nav
												class</span>
										</div>
										<div class="card-body">
											<ul class="nav  justify-content-center nav-pills nav-info" id="pills-clrtab" role="tablist">
												<li class="nav-item"><a class="nav-link" id="pills-clrhome-tab"
														data-bs-toggle="pill" href="#pills-clrhome" role="tab"
														aria-controls="pills-clrhome" aria-selected="false"><i
															class="icofont icofont-ui-home"></i>Home</a></li>
												<li class="nav-item"><a class="nav-link" id="pills-clrprofile-tab"
														data-bs-toggle="pill" href="#pills-clrprofile" role="tab"
														aria-controls="pills-clrprofile" aria-selected="false"><i
															class="icofont icofont-man-in-glasses"></i>Profile</a></li>
												<li class="nav-item"><a class="nav-link active"
														id="pills-clrcontact-tab" data-bs-toggle="pill"
														href="#pills-clrcontact" role="tab"
														aria-controls="pills-clrcontact" aria-selected="true"><i
															class="icofont icofont-contacts"></i>Contact</a></li>
											</ul>
											<div class="tab-content" id="pills-clrtabContent">
												<div class="tab-pane fade" id="pills-clrhome" role="tabpanel"
													aria-labelledby="pills-clrhome-tab">
													<p class="mb-0 m-t-30">Lorem Ipsum is simply dummy text of the
														printing and typesetting industry. Lorem Ipsum has been the
														industry's standard dummy text ever since the 1500s, when an
														unknown printer took a galley of type and scrambled it to make a
														type specimen book. It has survived not only five centuries, but
														also the leap into electronic typesetting, remaining essentially
														unchanged. It was popularised in the 1960s with the release of
														Letraset sheets containing Lorem Ipsum passages, and more
														recently with desktop publishing software like Aldus PageMaker
														including versions of Lorem Ipsum</p>
												</div>
												<div class="tab-pane fade" id="pills-clrprofile" role="tabpanel"
													aria-labelledby="pills-clrprofile-tab">
													<div class="row">
															<div class="col-sm-12">
																<div class="card">
																	<div class="profile-post">
																		<div class="post-header">
																			<div class="d-flex"><img
																					class="img-thumbnail rounded-circle me-3"
																					src="images/users/avatar.jpg"
																					alt="Generic placeholder image">
																				<div class="flex-grow-1 align-self-center"><a
																						href="social-app.html" data-bs-original-title=""
																						title="">
																						<h5 class="user-name">Emay Walter</h5>
																					</a>
																					<h6>22 Hours ago</h6>
																				</div>
																			</div>
																			<div class="post-setting"><i class="fa fa-ellipsis-h"></i></div>
																		</div>
																		<div class="post-body">
																			<div class="img-container">
																				<div class="row mt-4 pictures my-gallery" itemscope=""
																					data-pswp-uid="2">
																					<figure class="col-sm-6" itemprop="associatedMedia"
																						itemscope=""><a
																							href="images/login-bg-1.jpg"
																							itemprop="contentUrl" data-size="1600x950"
																							data-bs-original-title="" title=""><img
																								class="img-fluid"
																								src="images/login-bg-1.jpg"
																								itemprop="thumbnail" alt="gallery"></a>
																						<figcaption itemprop="caption description">Image
																							caption 1</figcaption>
																					</figure>
																					<figure class="col-sm-6" itemprop="associatedMedia"
																						itemscope=""><a
																							href="images/login-bg-1.jpg"
																							itemprop="contentUrl" data-size="1600x950"
																							data-bs-original-title="" title=""><img
																								class="img-fluid"
																								src="images/login-bg-1.jpg"
																								itemprop="thumbnail" alt="gallery"></a>
																						<figcaption itemprop="caption description">Image
																							caption 2</figcaption>
																					</figure>
																				</div>
																			</div>
																			
																			<div class="post-react">
																				<ul>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/3.jpg" alt=""></li>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/5.jpg" alt=""></li>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/1.jpg" alt=""></li>
																				</ul>
																				<h6>+5 people react this post</h6>
																			</div>
																			<p>Dressing is a way of life. My customers are successful
																				working women. I want people to be afraid of the women I
																				dress. Age is something only in your head or a stereotype.
																				Age means nothing when you are passionate about something.
																				There has to be a balance between your mental satisfaction
																				and the financial needs of your company.</p>
																			<ul class="post-comment">
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-heart">
																								<path
																									d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
																								</path>
																							</svg>&nbsp;&nbsp;Like<span
																								class="counter">50</span></a></label></li>
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-message-square">
																								<path
																									d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
																								</path>
																							</svg>&nbsp;&nbsp;Comment<span
																								class="counter">70</span></a></label></li>
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-share">
																								<path
																									d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8">
																								</path>
																								<polyline points="16 6 12 2 8 6"></polyline>
																								<line x1="12" y1="2" x2="12" y2="15"></line>
																							</svg>&nbsp;&nbsp;share<span
																								class="counter">20</span></a></label></li>
																			</ul>
																		</div>
																	</div>
																</div>
															</div>
															<div class="col-sm-12">
																<div class="card">
																	<div class="profile-post">
																		<div class="post-header">
																			<div class="d-flex"><img
																					class="img-thumbnail rounded-circle me-3"
																					src="../assets/images/user/7.jpg"
																					alt="Generic placeholder image">
																				<div class="flex-grow-1 align-self-center"><a
																						href="social-app.html" data-bs-original-title=""
																						title="">
																						<h5 class="user-name">Emay Walter</h5>
																					</a>
																					<h6>5 Hours ago</h6>
																				</div>
																			</div>
																			<div class="post-setting"><i class="fa fa-ellipsis-h"></i></div>
																		</div>
																		<div class="post-body">
																			<div class="img-container">
																				<div class="row mt-4 pictures my-gallery" itemscope=""
																					data-pswp-uid="2">
																					<figure class="col-sm-6" itemprop="associatedMedia"
																						itemscope=""><a
																							href="images/login-bg-1.jpg"
																							itemprop="contentUrl" data-size="1600x950"
																							data-bs-original-title="" title=""><img
																								class="img-fluid"
																								src="images/login-bg-1.jpg"
																								itemprop="thumbnail" alt="gallery"></a>
																						<figcaption itemprop="caption description">Image
																							caption 1</figcaption>
																					</figure>
																					<figure class="col-sm-6" itemprop="associatedMedia"
																						itemscope=""><a
																							href="images/login-bg-1.jpg"
																							itemprop="contentUrl" data-size="1600x950"
																							data-bs-original-title="" title=""><img
																								class="img-fluid"
																								src="images/login-bg-1.jpg"
																								itemprop="thumbnail" alt="gallery"></a>
																						<figcaption itemprop="caption description">Image
																							caption 2</figcaption>
																					</figure>
																				</div>
																			</div>
																			<div class="post-react">
																				<ul>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/3.jpg" alt=""></li>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/5.jpg" alt=""></li>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/1.jpg" alt=""></li>
																				</ul>
																				<h6>+25 people react this post</h6>
																			</div>
																			<p>Success isn't about the end result, it's about what you learn
																				along the way. Confidence. If you have it,you can make
																				anything look good. Grunge is a hippied romantic version of
																				punk. I'm an accomplice to helping women get what they want.
																				Clothes can transform your mood and confidence. I think it's
																				an old fashioned notion that fashion needs to be exclusive
																				to be fashionable.</p>
																			<ul class="post-comment">
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-heart">
																								<path
																									d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
																								</path>
																							</svg>&nbsp;&nbsp;Like<span
																								class="counter">520</span></a></label></li>
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-message-square">
																								<path
																									d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
																								</path>
																							</svg>&nbsp;&nbsp;Comment<span
																								class="counter">85</span></a></label></li>
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-share">
																								<path
																									d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8">
																								</path>
																								<polyline points="16 6 12 2 8 6"></polyline>
																								<line x1="12" y1="2" x2="12" y2="15"></line>
																							</svg>&nbsp;&nbsp;share<span
																								class="counter">30</span></a></label></li>
																			</ul>
																		</div>
																	</div>
																</div>
															</div>
															<div class="col-sm-12">
																<div class="card">
																	<div class="profile-post">
																		<div class="post-header">
																			<div class="d-flex"><img
																					class="img-thumbnail rounded-circle me-3"
																					src="../assets/images/user/7.jpg"
																					alt="Generic placeholder image">
																				<div class="flex-grow-1 align-self-center"><a
																						href="social-app.html" data-bs-original-title=""
																						title="">
																						<h5 class="user-name">Emay Walter</h5>
																					</a>
																					<h6>2 Hours ago</h6>
																				</div>
																			</div>
																			<div class="post-setting"><i class="fa fa-ellipsis-h"></i></div>
																		</div>
																		<div class="post-body">
																			<div class="img-container">
																				<div class="my-gallery" itemscope="" data-pswp-uid="3">
																					<figure itemprop="associatedMedia" itemscope=""><a
																							href="../assets/images/user-profile/post4.jpg"
																							itemprop="contentUrl" data-size="1600x950"
																							data-bs-original-title="" title=""><img
																								class="img-fluid"
																								src="../assets/images/user-profile/post4.jpg"
																								itemprop="thumbnail" alt="gallery"></a>
																						<figcaption itemprop="caption description">Image
																							caption 1</figcaption>
																					</figure>
																				</div>
																			</div>
																			<div class="post-react">
																				<ul>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/3.jpg" alt=""></li>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/5.jpg" alt=""></li>
																					<li><img class="rounded-circle"
																							src="../assets/images/user/1.jpg" alt=""></li>
																				</ul>
																				<h6>+20 people react this post</h6>
																			</div>
																			<p>Comfort is very important to me. I think people live better
																				in big houses and in big clothes. Design and style should
																				work toward making you look good and feel good without a lot
																				of effort so you can get on with the things that matter. My
																				shows are about the complete woman who swallows it all. Its
																				a question of survival. Those fashion designers are just
																				crazy;but arent we all? You can only go forward by making
																				mistakes.</p>
																			<ul class="post-comment">
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-heart">
																								<path
																									d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z">
																								</path>
																							</svg>&nbsp;&nbsp;Like<span
																								class="counter">407</span></a></label></li>
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-message-square">
																								<path
																									d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z">
																								</path>
																							</svg>&nbsp;&nbsp;Comment<span
																								class="counter">302</span></a></label></li>
																				<li><label><a href="javascript:void(0)"
																							data-bs-original-title="" title=""><svg
																								xmlns="http://www.w3.org/2000/svg"
																								width="24" height="24" viewBox="0 0 24 24"
																								fill="none" stroke="currentColor"
																								stroke-width="2" stroke-linecap="round"
																								stroke-linejoin="round"
																								class="feather feather-share">
																								<path
																									d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8">
																								</path>
																								<polyline points="16 6 12 2 8 6"></polyline>
																								<line x1="12" y1="2" x2="12" y2="15"></line>
																							</svg>&nbsp;&nbsp;share<span
																								class="counter">180</span></a></label></li>
																			</ul>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													
												</div>
												<div class="tab-pane fade active show" id="pills-clrcontact"
													role="tabpanel" aria-labelledby="pills-clrcontact-tab">
													<p class="mb-0 m-t-30">Lorem Ipsum is simply dummy text of the
														printing and typesetting industry. Lorem Ipsum has been the
														industry's standard dummy text ever since the 1500s, when an
														unknown printer took a galley of type and scrambled it to make a
														type specimen book. It has survived not only five centuries, but
														also the leap into electronic typesetting, remaining essentially
														unchanged. It was popularised in the 1960s with the release of
														Letraset sheets containing Lorem Ipsum passages, and more
														recently with desktop publishing software like Aldus PageMaker
														including versions of Lorem Ipsum</p>
												</div>
											</div>
										</div>
									</div>	
								</div>
								<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
									<div class="pswp__bg"></div>
									<div class="pswp__scroll-wrap">
										<div class="pswp__container">
											<div class="pswp__item"></div>
											<div class="pswp__item"></div>
											<div class="pswp__item"></div>
										</div>
										<div class="pswp__ui pswp__ui--hidden">
											<div class="pswp__top-bar">
												<div class="pswp__counter"></div><button
													class="pswp__button pswp__button--close" title=""
													data-bs-original-title="Close (Esc)"
													aria-label="Close (Esc)"></button><button
													class="pswp__button pswp__button--share" title=""
													data-bs-original-title="Share" aria-label="Share"></button><button
													class="pswp__button pswp__button--fs" title=""
													data-bs-original-title="Toggle fullscreen"
													aria-label="Toggle fullscreen"></button><button
													class="pswp__button pswp__button--zoom" title=""
													data-bs-original-title="Zoom in/out"
													aria-label="Zoom in/out"></button>
												<div class="pswp__preloader">
													<div class="pswp__preloader__icn">
														<div class="pswp__preloader__cut">
															<div class="pswp__preloader__donut"></div>
														</div>
													</div>
												</div>
											</div>
											<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
												<div class="pswp__share-tooltip"></div>
											</div><button class="pswp__button pswp__button--arrow--left" title=""
												data-bs-original-title="Previous (arrow left)"
												aria-label="Previous (arrow left)"></button><button
												class="pswp__button pswp__button--arrow--right" title=""
												data-bs-original-title="Next (arrow right)"
												aria-label="Next (arrow right)"></button>
											<div class="pswp__caption">
												<div class="pswp__caption__center"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>




					</div>

				</main>
				<!--End 页面主要内容-->
			</div>
		</div>
		<style>
			
			.my-gallery img {
			    width: 100%;
			    border-radius: 10px;
			}
			.nav-info .nav-link,.nav-pills.nav-info .nav-link {
			    color: #282828
			}
			
			.nav-info .nav-link.active,.nav-info .show>.nav-link,.nav-pills.nav-info .nav-link.active,.nav-pills.nav-info .show>.nav-link {
			    background-color: #1517267a;
			    color: #ffffff
			}
			
			.user-profile .follow .follow-num {
				font-size: 18px;
				color: #242934;
				font-family: "Rubik", sans-serif, sans-serif;
				font-weight: 600
			}

			.user-profile .follow span {
				color: #59667a
			}

			.user-profile .follow ul.follow-list {
				border-top: 1px solid rgba(83, 70, 134, 0.1019607843)
			}

			.user-profile .follow ul.follow-list li {
				display: inline-block;
				padding-top: 15px
			}

			.user-profile .follow ul.follow-list li:nth-child(n+2) {
				margin-left: 15px;
				padding-left: 15px;
				border-left: 1px solid rgba(83, 70, 134, 0.1019607843)
			}

			.user-profile .profile-img-style {
				padding: 30px
			}

			.user-profile .profile-img-style .img-container {
				margin-top: 30px
			}

			.user-profile .profile-img-style .user-name {
				font-size: 18px;
				color: #242934;
				margin: 0;
				font-weight: 600
			}

			.user-profile .profile-img-style p {
				line-height: 30px;
				font-size: 14px;
				color: #898989;
				margin-bottom: 0
			}

			.user-profile .profile-img-style .d-flex img {
				width: 50px
			}

			.user-profile .like-comment a {
				color: #898989
			}

			.user-profile .like-comment a:hover {
				color: #DC0808
			}

			.user-profile .like-comment span {
				font-family: "Rubik", sans-serif, sans-serif
			}

			.user-profile .social-media ul.user-list-social {
				display: flex;
				justify-content: center;
				align-items: center;
				width: fit-content;
				margin-right: auto;
				margin-left: auto;
				padding-bottom: 20px
			}

			.user-profile .social-media ul.user-list-social li:nth-child(n+2) {
				margin-left: 5px
			}

			.user-profile .social-media ul.user-list-social li a {
				padding: 0;
				width: 32px;
				height: 32px;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(83, 70, 134, 0.08)
			}

			.user-profile .social-media ul.user-list-social li a i {
				font-size: 14px;
				color: #534686
			}

			.user-profile .social-media ul.user-list-social li:hover a {
				background-color: #534686
			}

			.user-profile .social-media ul.user-list-social li:hover a i {
				color: #fff
			}

			.user-profile .profile-header {
				height: 420px;
				padding: 30px;
				display: flex !important
			}

			.user-profile .profile-header .profile-img-wrrap {
				display: none
			}

			.user-profile .profile-header .userpro-box {
				background-color: #EFF3F9;
				padding: 30px;
				max-width: 380px;
				margin-top: auto;
				margin-bottom: auto;
				text-align: center;
				border-radius: 10px;
				overflow: hidden;
			}

			.user-profile .profile-header .userpro-box .img-wrraper {
				position: relative;
				width: fit-content;
				margin: auto
			}

			.user-profile .profile-header .userpro-box .avatar {
				width: 100px;
				height: 100px;
				max-width: 155px;
				max-height: 155px;
				border-radius: 50%;
				overflow: hidden;
				margin-left: auto;
				margin-right: auto;
				border: 7px solid rgba(83, 70, 134, 0.08);
				margin-bottom: 15px
			}

			.user-profile .profile-header .userpro-box .avatar img {
				width: 100%;
				height: 100%
			}

			.user-profile .profile-header .userpro-box .icon-wrapper {
				position: absolute;
				right: 0;
				bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 35px;
				width: 35px;
				border-radius: 50%;
				background-color: #fff;
				cursor: pointer;
				overflow: hidden;
				margin: 0 auto;
				font-size: 17px;
				box-shadow: 0 0 6px 3px rgba(68, 102, 242, 0.1)
			}

			.user-profile .profile-header .userpro-box .icon-wrapper i {
				color: #534686
			}

			.user-profile .profile-header .userpro-box h4 {
				color: #242934;
				font-weight: 600;
				font-size: 20px
			}

			.user-profile .profile-header .userpro-box h6 {
				font-size: 14px;
				text-transform: uppercase;
				color: #9993B4;
				margin-bottom: 15px;
				font-weight: 600
			}

			.user-profile .profile-post {
				padding: 30px
			}

			.user-profile .profile-post .post-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20px
			}

			.user-profile .profile-post .post-header .d-flex {
				align-items: center
			}

			.user-profile .profile-post .post-header .d-flex img {
				width: 60px
			}

			.user-profile .profile-post .post-header .d-flex h5 {
				color: #242934;
				font-size: 18px;
				font-weight: 600;
				margin-bottom: 3px
			}

			.user-profile .profile-post .post-header .d-flex h6 {
				color: #9993B4;
				font-size: 14px;
				margin-bottom: 0
			}

			.user-profile .profile-post .post-header .post-setting i {
				color: #9993B4;
				font-size: 22px
			}

			.user-profile .profile-post .post-body p {
				color: #9993B4
			}

			.user-profile .profile-post .post-body .post-react {
				display: flex;
				align-items: center;
				margin-bottom: 20px
			}

			.user-profile .profile-post .post-body .post-react ul li {
				display: inline-block
			}

			.user-profile .profile-post .post-body .post-react ul li:nth-child(n+2) {
				margin-left: -20px
			}

			.user-profile .profile-post .post-body .post-react ul li img {
				width: 30px;
				height: 30px
			}

			.user-profile .profile-post .post-body .post-react h6 {
				font-size: 14px;
				color: rgba(27, 49, 85, 0.6);
				margin-bottom: 0;
				margin-left: 15px
			}

			.user-profile .profile-post .post-body .post-comment li {
				display: inline-block;
				color: rgba(27, 49, 85, 0.6)
			}

			.user-profile .profile-post .post-body .post-comment li label {
				margin-bottom: 0;
				font-weight: 500
			}

			.user-profile .profile-post .post-body .post-comment li label a {
				color: rgba(27, 49, 85, 0.6);
				display: flex;
				align-items: center;
				line-height: 1
			}

			.user-profile .profile-post .post-body .post-comment li label a svg {
				width: 14px;
				height: 14px
			}

			.user-profile .profile-post .post-body .post-comment li label a span {
				margin-left: 10px
			}

			.user-profile .profile-post .post-body .post-comment li:nth-child(n+2) {
				margin-left: 15px
			}

			.user-profile .post-about ul {
				margin-bottom: 20px
			}

			.user-profile .post-about ul li {
				display: flex;
				align-items: center
			}

			.user-profile .post-about ul li .icon {
				width: 35px;
				height: 35px;
				border-radius: 5px;
				background-color: rgba(83, 70, 134, 0.08);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 15px
			}

			.user-profile .post-about ul li .icon svg {
				width: 18px;
				height: 18px;
				color: #534686
			}

			.user-profile .post-about ul li h5 {
				color: #242934;
				text-transform: capitalize
			}

			.user-profile .post-about ul li p {
				font-size: 12px;
				line-height: 1;
				text-transform: capitalize
			}

			.user-profile .post-about ul li:nth-child(n+2) {
				margin-top: 20px
			}

			.default-according .card {
				margin-bottom: 0;
				box-shadow: none !important;
				border: 1px solid rgba(83, 70, 134, .1019607843);
				overflow: hidden
			}

			.default-according .card+.card {
				margin-top: 10px
			}

			.default-according .card .btn-link {
				font-weight: 500;
				color: #2b2b2b;
				font-size: 16px;
				text-decoration: none;
				padding-top: 0;
				padding-bottom: 0
			}

			.default-according .card .btn-link:focus,
			.default-according .card .btn-link:hover {
				text-decoration: none
			}

			.default-according .card .card-header {
				padding: .75rem 1.25rem;
				border-bottom: 1px solid rgba(83, 70, 134, .1019607843)
			}

			.default-according .card .card-header i {
				position: initial;
				font-size: 20px;
				display: inline-block;
				vertical-align: text-bottom;
				margin-right: 5px
			}

			.default-according .card .card-header h3 {
				margin-top: 2px
			}

			.default-according .card .card-body {
				border-top: none !important;
				padding: 20px
			}

			.default-according .card .card-body h5 {
				font-size: 14px;
				margin-bottom: 5px
			}

			.default-according .card .card-body h6 {
				color: #9993b4;
				font-size: 12px;
				margin-bottom: 5px
			}

			.default-according .card .card-body ul.rating li {
				display: inline-block
			}

			.default-according.style-1 button {
				width: 100%;
				text-align: left
			}

			.default-according.style-1 button:before {
				right: 20px;
				position: absolute;
				transition: .4s
			}

			.default-according.style-1 button[aria-expanded=true]:before {
				content: "\F0140";
				font-family: "Material Design Icons"
			}

			.default-according.style-1 button[aria-expanded=false]:before {
				content: "\F0143";
				font-family: "Material Design Icons"
			}
			
			.job-accordion .card {
			  margin-bottom: 30px;
			}
			.job-accordion .btn-block {
			  border-top-left-radius: 0;
			  border-top-right-radius: 0;
			  border-bottom-left-radius: 10px;
			  border-bottom-right-radius: 10px;
			}
			
			.job-sidebar .job-toggle {
			  display: none;
			  width: fit-content;
			}
			
			.job-search p {
			  margin-top: 20px;
			  color: #9993B4;
			}
			.job-search .d-flex .flex-grow-1 h3 {
			  margin-bottom: 3px;
			}
			.job-search .d-flex .flex-grow-1 h3 span {
			  font-size: 13px;
			  margin-top: 5px;
			  font-weight: normal;
			}
			.job-search .d-flex .flex-grow-1 h3 span.badge {
			  color: #ffffff;
			  font-weight: 600;
			}
			.job-search .d-flex .flex-grow-1 h3 .btn {
			  font-weight: 600;
			}
			.job-search .d-flex .flex-grow-1 p {
			  margin-top: 0;
			  margin-bottom: 0;
			  font-weight: 500;
			  display: inline-block;
			}
			.job-search .d-flex .flex-grow-1 ul.rating {
			  margin-left: 10px;
			  display: inline-block;
			}
			.job-search .d-flex .flex-grow-1 ul.rating li {
			  display: inline-block;
			  letter-spacing: -2px;
			}
			.job-search .d-flex .flex-grow-1 .job-apply-btn {
			  position: absolute;
			  top: 30px;
			  right: 30px;
			}
			.job-search .job-description {
			  margin-top: 20px;
			  border-top: 1px solid rgba(83, 70, 134, 0.1019607843);
			  padding-top: 20px;
			}
			.job-search .job-description p {
			  margin-top: 0;
			  margin-bottom: 6px;
			  letter-spacing: 0.04em;
			}
			.job-search .job-description ul {
			  list-style-type: disc;
			  list-style-position: inside;
			}
			.job-search .job-description ul li {
			  margin-bottom: 10px;
			  cursor: pointer;
			  color: #9993B4;
			}
			.job-search .job-description ul li:last-child {
			  margin-bottom: 0;
			}
			.job-search .job-description ul li:hover {
			  color: #534686;
			}
			.job-search .job-description .theme-form {
			  margin-top: 20px;
			  margin-bottom: 30px;
			  border-bottom: 1px solid #efefef;
			}
			.job-search .job-description .theme-form .row div[class^=col-] + div[class^=col-] .select2-container {
			  margin-top: 14px;
			  max-width: 100%;
			}
			.job-search .job-description .theme-form .row div[class^=col-] .job-select2 ~ .select2-container {
			  margin-top: 0 !important;
			}
			.job-search .job-description .theme-form .row div[class^=col-] .input-group .datepicker-here {
			  font-size: 14px;
			  border: 1px solid rgba(83, 70, 134, 0.1019607843);
			}
			.card {
			  margin-bottom: 30px;
			  border: none;
			  transition: all 0.3s ease;
			  letter-spacing: 0.5px;
			  border-radius: 20px;
			  box-shadow: 0 0 20px rgba(8, 21, 66, 0.05);
			}
			.card:hover {
			  box-shadow: 0 0 40px rgba(8, 21, 66, 0.05);
			  transition: all 0.3s ease;
			}
			.card .card-header {
			  padding: 25px;
			  border-bottom: none;
			  border-top-left-radius: 20px;
			  border-top-right-radius: 20px;
			  position: relative;
			  background-color: transparent;
			}
			.card .card-header.dflex {
			  display: flex;
			  align-items: center;
			}
			.card .card-header .center-content {
			  margin-left: auto;
			  margin-right: auto;
			}
			.card .card-header .center-content p {
			  color: #9993B4;
			  margin-bottom: 0;
			}
			.card .card-header.card-no-border {
			  border-bottom: none !important;
			}
			.card .card-header h3 {
			  color: #534686;
			  margin-bottom: 0;
			}
			.card .card-header > span {
			  font-size: 12px;
			  color: rgba(43, 43, 43, 0.7);
			  margin-top: 5px;
			  display: block;
			  letter-spacing: 1px;
			}
			.card .card-header .card-header-right {
			  border-radius: 0 0 0 7px;
			  right: 25px;
			  top: 24px;
			  display: inline-block;
			  float: right;
			  position: absolute;
			  z-index: 0;
			}
			.card .card-header .card-header-right .card-option {
			  text-align: right;
			  width: 26px;
			  height: 26px;
			  overflow: hidden;
			  transition: 0.3s ease-in-out;
			}
			.card .card-header .card-header-right .card-option li {
			  display: inline-block;
			}
			.card .card-header .card-header-right .card-option li i {
			  margin: 0 5px;
			}
			.card .card-header .card-header-right .card-option li:first-child {
			  background-color: rgba(83, 70, 134, 0.1);
			  width: 26px;
			  height: 26px;
			  border-radius: 50%;
			}
			.card .card-header .card-header-right .card-option li:first-child > div {
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  height: 100%;
			  width: 100%;
			}
			.card .card-header .card-header-right .card-option li:first-child i {
			  transition: all 1s ease;
			  color: #534686;
			}
			.card .card-header .card-header-right .card-option li:first-child i.icon-angle-double-right {
			  color: #2B2B2B;
			}
			.card .card-header .card-header-right .card-option li:first-child i.icon-angle-double-right::before {
			  content: "\e661" !important;
			}
			.card .card-header .card-header-right i {
			  cursor: pointer;
			  color: #2c323f;
			  line-height: 20px;
			}
			.card .card-header .card-header-right i.icofont-refresh {
			  font-size: 13px;
			}
			.card .card-body {
			  padding: 25px;
			  background-color: transparent;
			}
			.card .card-body p:last-child {
			  margin-bottom: 0;
			}
			.card .sub-title {
			  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			  padding-bottom: 5px;
			  margin-bottom: 8px;
			  font-size: 18px;
			}
			.card .card-footer {
			  background-color: transparent;
			  border-top: 1px solid rgba(83, 70, 134, 0.1019607843);
			  padding: 25px;
			  border-bottom-left-radius: 20px;
			  border-bottom-right-radius: 20px;
			}
			.card.card-load .card-loader {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  display: flex;
			  background-color: rgba(255, 255, 255, 0.7);
			  z-index: 8;
			  align-items: center;
			  justify-content: center;
			}
			.card.card-load .card-loader i {
			  margin: 0 auto;
			  color: var(--theme-default);
			  font-size: 20px;
			}
			.card.full-card {
			  position: fixed;
			  top: 0;
			  z-index: 99999;
			  box-shadow: none;
			  right: 0;
			  border-radius: 0;
			  border: 1px solid #efefef;
			  width: calc(100vw - 12px);
			  height: 100vh;
			}
			.card.full-card .card-body {
			  overflow: auto;
			}
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
		<!--引入chart插件js-->
		<script type="text/javascript" src="js/chart.min.js"></script>
		<script type="text/javascript" src="js/main.min.js"></script>

	</body>
</html>
